<!-- 按键组件 -->

<!--
1.此组件使用，只需将按键名写入引入的此组件中即可
      例：<buttons>开启/关闭</buttons>
2.此组件的禁用样式+按键非禁用样式，可以自定义，也可以动态变化
3.禁用样式继承属性，下方属性说明中有介绍，自行查看
4.所有样式按照以下传入属性自行添加或修改，若需按键动画，可以期待一起更新，或者等我有兴趣后更新
-->

<!-- 传入属性 -->
<!--
styleObj:需求样式改变对象
     例（全部支持的样式为）：
	    {
          改变的字体颜色  默认 #fff
          color: "#fff",
          改变的字体大小  默认 16px
          fontSize: "16px",
          改变的字体宽度  默认 600
          fontWeight: "600",
          行高            默认 30px
          lineHeight: "30px",
          字体排版        默认 center
          textAlign: "center",
          按键高度        默认 30px
          height: "30px",
          按键宽度        默认  ""
          width: "",
          内边距          默认 0 8px
          padding: "0 8px",
          背景颜色         默认 #00A2E8
          backgroundColor: "#00A2E8",
          背景图片(背景渐变)  默认 ""
          backgroundImage: "",
          边框样式         默认 solid 1px #A6A6A6
          border: "solid 1px #A6A6A6",
          边框圆角         默认 30px
          borderRadius: "30px",
        };

transmitMsg:需要传递点击信息，若有则可以绑定传递，若没有则可以不用添加，则点击后，传递的数据为空 (此为一个对象，传递的属性，请以对象的形式书写)

ifDisable:是否禁用此按键  (true表示开启禁用  false表示关闭禁用)  默认false

styleDisableObj:禁用按键样式  (默认 继承 **除了** 字体颜色color  背景颜色backgroundColor  边框样式border **的所有属性**，但对继承的属性进行修改，也可以执行)
     注意：此对象传递，若是 以上继续的属性需要修改则直接添加即可，否则不需要添加！！！ 但非继承属性（color，backgroundColor，border）必须添加！！！
     例（目前默认禁用的样式）
        {
          // 改变的字体颜色
          color: "#fff",
          // 背景颜色
          backgroundColor: "#A6A6A6",
          // 边框样式
          border: "solid 1px #A6A6A6",
        }
-->

<!-- 传入方法 -->
<!--buttonClick ：调用父组件函数 传递需要传递的信息对象 transmitMsg  （若开启了 ifDisable 按键禁用，则此方法不会返回任何值，即无法点击）-->

<template>
  <div
    class="buttons"
    :style="!ifDisable ? styleList : styleDisableList"
    @click="buttons"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    // 需求样式改变对象
    styleObj: {
      type: [Object],
      default() {
        return {
          // 改变的字体颜色
          color: "#fff",
          // 改变的字体大小
          fontSize: "16px",
          // 改变的字体宽度
          fontWeight: "600",
          //  行高
          lineHeight: "30px",
          //   字体排版
          textAlign: "center",
          // 按键高度
          height: "30px",
          // 按键宽度
          width: "",
          // 内边距
          padding: "0 8px",
          // 背景颜色
          backgroundColor: "#00A2E8",
          // 背景图片(背景渐变)
          backgroundImage: "",
          // 边框样式
          border: "solid 1px #A6A6A6",
          // 边框圆角
          borderRadius: "30px",
        };
      },
    },

    // 需要传递点击信息，若有则可以绑定传递，若没有则可以不用添加，则点击后，传递的数据为空 (此为一个对象，传递的属性，请以对象的形式书写)
    transmitMsg: {
      type: [Object],
      default() {
        return {};
      },
    },

    // 是否禁用此按键  (true表示开启禁用  false表示关闭禁用)  默认false
    ifDisable: {
      type: [Boolean],
      default: true,
    },

    // 禁用按键样式  (默认 继承 **除了** 字体颜色color  背景颜色backgroundColor  边框样式border **的所有属性**，但对继承的属性进行修改，也可以执行)
    //  注意：此对象传递，若是 以上继续的属性需要修改则直接添加即可，否则不需要添加！！！ 但非继承属性（color，backgroundColor，border）必须添加！！！
    styleDisableObj: {
      type: [Object],
      default() {
        return {
          // 改变的字体颜色
          color: "#fff",
          // 背景颜色
          backgroundColor: "#A6A6A6",
          // 边框样式
          border: "solid 1px #A6A6A6",
        };
      },
    },
  },
  data() {
    return {
      // 绑定需求样式改变承接数组
      styleList: [],
      // 绑定禁用样式承接数组
      styleDisableList: [],
    };
  },
  created() {
    // 调取初始化渲染数组方法
    this.changeList();
    // 调取禁用按键样式初始化改变函数
    this.changeDisableList();
  },
  watch: {
    //   监听需求样式改变对象
    // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    styleObj: {
      deep: true,
      handler: function () {
        //   调取初始化渲染数组方法
        this.changeList();
      },
    },

    //   监听禁用按键样式对象
    // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    styleDisableObj: {
      deep: true,
      handler: function () {
        //   调取禁用按键样式初始化改变函数
        this.changeDisableList();
      },
    },
  },
  methods: {
    //   按键点击函数（若开启了 ifDisable 按键禁用，则此方法不会返回任何值，即无法点击）
    // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    buttons() {
      // 判断是否开起了禁用按键  开起的话，则不会使用以下内容
      if (this.ifDisable) {
        return;
      }

      // 调用父组件函数 传递需要传递的信息对象 transmitMsg
      this.$emit("buttonClick", this.transmitMsg);
    },

    //   渲染数组初始化改变函数
    // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    changeList() {
      // 初始化绑定需求样式改变承接数组
      this.styleList = [];

      // 循环传入的渲染对象  styleObj
      for (const key in this.styleObj) {
        // 声明一个变量为空对象
        let obj = {};
        // 将此空对象创建  属性  为循环的 styleObj 对象的属性名  并为其赋予 styleObj 对象中该属性的值
        obj[key] = this.styleObj[key];
        // 将处理好的obj变量添加到渲染数组 styleList 中
        this.styleList.push(obj);
      }
    },

    //   禁用按键样式初始化改变函数
    // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    changeDisableList() {
      // 初始化绑定禁用样式承接数组
      this.styleDisableList = [];

      // 循环传入的渲染对象  styleObj
      for (const key in this.styleObj) {
        // 声明一个变量为空对象
        let obj = {};

        // 判断是否是 不能继承的样式属性 并且 这些属性都是没有赋予值的
        if (
          key != "color" &&
          key != "backgroundColor" &&
          key != "border" &&
          !this.styleDisableObj[key]
        ) {
          // 如果是将此空对象创建  属性  为循环的 styleObj 对象的属性名  并为其赋予 styleObj 对象中该属性的值（即继承之前的样式值）
          obj[key] = this.styleObj[key];
        } else {
          // 否则将此空对象创建  属性  为循环的 styleDisableObj 对象的属性名  并为其赋予 styleDisableObj 对象中该属性的值
          obj[key] = this.styleDisableObj[key];
        }

        // 将处理好的obj变量添加到渲染数组 styleList 中
        this.styleDisableList.push(obj);
      }
    },
  },
};
</script>

<style scoped>
/* 按键组件 */
.buttons {
  display: inline-block;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
</style>
